import React, { Component } from 'react'
import { connect } from 'react-redux'
import { deleteUser } from './actions/user';

export class Page2 extends Component {

    addUser = () => {
        const { userList = [] } = this.props;
        const sortedUserList = userList.sort((a, b) => a.id - b.id);
        const nextId = sortedUserList.slice(-1)[0].id + 1;
        const user = { id: nextId, name: "张三" };
        // TODO:用redux实现添加用户功能
    }

    render() {
        const { userList = [], deleteUser } = this.props;
        return (
            <div>
                <button onClick={this.addUser}>增加一个用户</button>
                <ul>
                    {
                        userList.map(user => <li key={user.id}>{user.name}<a
                            onClick={(e) => {
                                e.preventDefault();
                                deleteUser(user.id);
                            }} href="#">删除</a></li>)
                    }
                </ul>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    userList: state.user.list
})

const mapDispatchToProps = {
    deleteUser
}

export default connect(mapStateToProps, mapDispatchToProps)(Page2)

